{include file='index/header' /}
<div class="main">
	<div class="contents">
		<div class="top">背景主题</div>
		<h2><a href="/setting/">个人资料 | </a><span><a href="/setting/avatar/">修改头像 | </a><span><a
						href="/setting/background/">背景主题 | </a></span><span><a href="/setting/passwd/">修改密码</a></span>
		</h2>
		<!-- 		<h2>头像</h2> -->
		<div class="entry" style="border-bottom: unset">
			<div class="backgroundhtml">
				<img width="100%" style="min-height: 200px; max-height: 350px;"
					src="{:getThemeInfo($userInfo.theme)[1]}" alt="">
			</div>
			{if $bgArr}
			<div class="recent-backgrounds"
				style="margin-bottom: 20px; padding: 15px; border-radius: 5px;">
				<h3 style="margin-bottom: 15px; color: #333;text-align: left;">最近使用的背景（选择后点击保存生效）</h3>
				<div style="display: flex; gap: 5px; flex-wrap: wrap;">
					{volist name="bgArr" id="bg" key="k"}
					<div style="width: 120px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden;"
						onclick="$('.backgroundhtml img').attr('src', '{$bg[\'media_info\']}'); $('#backgroundVal').val('{$bg[\'media_info\']}'); $('.background-blur').css('background-image', 'url(' + '{$bg[\'media_info\']}' + ')');">
						<img src="{$bg['media_info']}"
							style="width: 100%; height: 100%; object-fit: cover; border: 2px solid #eee; transition: all 0.3s;"
							onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
					</div>
					{/volist}
				</div>
			</div>
			{/if}

			<!-- 主题选择部分 -->
			<div class="recent-themes"
				style="margin-bottom: 20px; padding: 15px; border-radius: 5px;">
				<h3 style="margin-bottom: 15px; color: #333;text-align: left;">选择主题色系(点击保存生效)</h3>
				<div style="display: flex; gap: 5px; flex-wrap: wrap;">
					<!-- 原有的主题选择项 -->
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #1899c9; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('default');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">默认主题</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #FFFFFF; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('minimal-white');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">简约白色</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #FFB6C1; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('pink');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">粉系少女</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #66CDAA; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('green');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">绿色清新</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #FFA07A; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('rural');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">田园风格</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #6495ED; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('ocean');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">海洋主题</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #FFD700; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('desert');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">沙漠主题</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #FFA500; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('cartoon');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">卡通动漫</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background: linear-gradient(45deg, #FF6B6B, #556270); border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('gradient');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">透明风格</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #BC8F8F; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('vintage');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">复古主题</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #2F4F4F; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('business');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">商务大气</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #607D8B; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('tech');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">科技极简</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #DC143C; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('festival');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">节日主题</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #4B0082; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('space');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">星空宇宙</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #1E1E1E; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('dark-tech');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">暗黑科技</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #FF33CC; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('candy-dream');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">糖果梦幻</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #228B22; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('forest-mystery');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">森林神秘</span>
					</div>
					<div style="width: 95px; height: 70px; cursor: pointer; border-radius: 4px; overflow: hidden; background-color: #696969; border: 2px solid #eee; transition: all 0.3s;"
						onclick="applyTheme('metal-industry');"
						onmouseover="this.style.borderColor='#007BFF'" onmouseout="this.style.borderColor='#eee'">
						<span style="display: block; text-align: center; line-height: 70px;">金属工业</span>
					</div>
				</div>
			</div>

			<div class="uploadhtml formsubmit">
                
				<button type="button" id="uploadImage">
					<i class="layui-icon">&#xe67c;</i>上传
				</button>
				<button type="button" id="saveUpload">
					保存
				</button>
				<!-- 红色按钮 -->
				<button type="reset" value="重置" style="background-color: #ff5656;" id="resetImage">
					重置
				</button>
			</div>

		</div>



	</div>
	<input type="hidden" value="{:getThemeInfo($userInfo.theme)[1]}" id="backgroundVal">
	<input type="hidden" value="{:getThemeInfo($userInfo.theme)[0]}" id="backgroundTheme">
	<script>

		$(function () {
			layui.use('upload', function () {
				var upload = layui.upload;

				//执行实例
				var uploadInst = upload.render({
					elem: '#uploadImage' //绑定元素
					, url: '/index/setting/uploadImage' //上传接口
					, method: 'GET'
					, done: function (res) {
						if (res.status) {
							var data = res.data;
							$(".backgroundhtml img").attr('src', data.image_path);
							$("#backgroundVal").val(data.image_path);
							$(".background-blur").css('background-image', 'url(' + data.image_path + ')');
							// $("#backgroundVal").val(JSON.stringify(data));
						} else {
							alertMsg(res.msg);
						}
					}
					, error: function () {
						//请求异常回调
					}
				});
			});
			$("#saveUpload,#resetImage").click(function (event) {
				var self = this;
				layui.use('layer', function () {
					var layer = layui.layer;
					// 使用 layui 的弹框进行确认
					layer.confirm('确定要执行此操作吗？', {
						btn: ['确定', '取消'] //按钮
					}, function () {
						if ($(self).attr('type') == 'reset') {
							$(".backgroundhtml img").attr('src', '');
							$("#backgroundVal").val('');
						} else {
							var backgroundVal = $("#backgroundVal").val();
							var backgroundTheme = $("#backgroundTheme").val();
							// if (!backgroundVal) {
							// 	alertMsg('已保存');
							// 	return false;
							// }
						}
						// console.log(backgroundVal);
						$.ajax({
							url: '/index/setting/saveTheme',
							type: 'GET',
							dataType: 'json',
							data: { backgroundVal: backgroundVal, backgroundTheme: backgroundTheme },
						})
							.done(function (data) {
								if (data.status) {
									alertMsg('已保存', 0, 1);
								} else {
									alertMsg(data.msg);
								}
							})
							.fail(function () {
								console.log("error");
							})
							.always(function () {
								console.log("complete");
							});
					});
				});
			});
		})
	</script>
	<script>
        // 定义 applyTheme 函数
        function getContrastColor(hexColor) {
            // 去除可能的 # 符号
            hexColor = hexColor.replace('#', '');
            // 提取 RGB 值
            var r = parseInt(hexColor.substr(0, 2), 16);
            var g = parseInt(hexColor.substr(2, 2), 16);
            var b = parseInt(hexColor.substr(4, 2), 16);
            // 计算亮度
            var brightness = (r * 299 + g * 587 + b * 114) / 1000;
            // 根据亮度选择文字颜色
            return brightness > 128 ? '#000' : '#fff';
        }
        
        function applyTheme(theme) {
            if (theme === 'default') {
                document.documentElement.className = '';
            } else {
                document.documentElement.className = theme;
            }
            var header = document.getElementById('header');
            if (header) {
                if (theme === 'default') {
                    header.className = '';
                } else {
                    header.className = theme;
                }
            }
            // 保存主题到 localStorage
			$("#backgroundTheme").val(theme);
            // localStorage.setItem('selectedTheme', theme);
        }
        
        // 动态设置文字颜色
        document.querySelectorAll('.recent-themes div').forEach(function (div) {
            var bgColor = getComputedStyle(div).backgroundColor;
            // 将 RGB 颜色转换为十六进制颜色
            var hexColor = rgbToHex(bgColor);
            var textColor = getContrastColor(hexColor);
            div.style.color = textColor;
        });
        
        function rgbToHex(rgb) {
            var rgbValues = rgb.match(/\d+/g);
            if (rgbValues) {
                var r = parseInt(rgbValues[0]).toString(16).padStart(2, '0');
                var g = parseInt(rgbValues[1]).toString(16).padStart(2, '0');
                var b = parseInt(rgbValues[2]).toString(16).padStart(2, '0');
                return '#' + r + g + b;
            }
            return '#000';
        }

	</script>
	{include file='index/sidebar_index' /}
	{include file='index/footer' /}